<template>
  <div>
    <h3>会员等级列表</h3>
    <div>
      姓名：<input type="text" v-model="queryInfo.vname" /> 手机号：<input
        type="text"
        v-model="queryInfo.vphone"
      />
      <input type="button" value="查询" @click="getList" />
    </div>
    <table border="1">
      <tbody>
        <tr>
          <td>Id</td>
          <td>用户名</td>
          <td>性别</td>
          <td>手机号</td>
          <td>添加时间</td>
          <td>余额</td>
          <td>积分</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list">
          <td>{{ item.vid }}</td>
          <td>{{ item.vname }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.phone }}</td>
          <td>{{ moment(item.vtime).format("YYYY-MM-DD") }}</td>
          <td>{{ item.vprice }}</td>
          <td>{{ item.targe }}</td>
          <td>
            <input type="button" value="修改" @click="Upd(item.vid)"/>
            <input type="button" value="详情" @click="Dail(item.vid)"/>
            <input type="button" value="充值" @click="All(item.vid)"/>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <span>总页数：{{ totalPage }}</span>
      <span>总条数：{{ totalCount }}</span>

      <span>每页{{ queryInfo.pageIndex }}/{{ totalPage }}条</span>

      <select @change="changeSize" v-model="queryInfo.pageSize">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>

      <input type="button" value="首页" @click="goPage('home')" />
      <input type="button" value="上一页" @click="goPage('prev')" />
      <input type="button" value="下一页" @click="goPage('next')" />
      <input type="button" value="尾页" @click="goPage('end')" />
      <input type="text" v-model="page" />
      <input type="button" value="GO" @click="goPage(page)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import moment from "moment";

const route = useRoute();
const router = useRouter();

let data: any = reactive({
  queryInfo: {
    vname: "",
    vphone: "",
    pageIndex: 1,
    pageSize: 2,
  },
  list: [],
  totalCount: 0,
  totalPage: 0,
  page: 1,
  arr: [2, 4, 6, 8],
});

let { queryInfo, list, totalCount, totalPage, page, arr } = toRefs(data);

onMounted(() => {
  getList();
});

//页容量的改变

const changeSize = () => {
  queryInfo.value.pageIndex = 1;
  getList();
};
//分页

const goPage = (str: any) => {
  switch (str) {
    case "home":
      if (queryInfo.value.pageIndex == 1) {
        alert("已经到第一页了");
        return;
      }
      queryInfo.value.pageIndex = 1;
      break;

    case "prev":
      if (queryInfo.value.pageIndex == 1) {
        alert("已经到第一页了");
        return;
      }
      queryInfo.value.pageIndex--;
      break;

    case "next":
      if (queryInfo.value.pageIndex == totalPage.value) {
        alert("已经到最后一页了");
        return;
      }
      queryInfo.value.pageIndex++;
      break;
    case "end":
      if (queryInfo.value.pageIndex == totalPage.value) {
        alert("已经到最后一页了");
        return;
      }
      queryInfo.value.pageIndex = totalPage.value;
      break;
    case str:
      if (str == "") {
        alert("页码不能为空");
        return;
      }
      if (isNaN(str) == true) {
        alert("页码只是数字");
        return;
      }

      if (str > totalPage.value || str < 1) {
        alert("页码只是1到" + totalPage.value + "之间的数字");
        return;
      }

      queryInfo.value.pageIndex = str;
      break;
  }

  getList();
  page.value = queryInfo.value.pageIndex;
};

//修改
const Upd = (vid:any)=>{
  router.push({
    path:'/Vipupdate',
    query:{
      vid:vid
    }
  })
}
//充值
const All = (vid:any)=>{
  router.push({
    path:'/VipAll',
    query:{
      vid:vid
    }
  })
}

//详情
const Dail = (vid:any)=>{
  router.push({
    path:'/VipDetail',
    query:{
      vid:vid
    }
  })
}
//获取列表
const getList = () => {
  let obj = {
    vname: queryInfo.value.vname,
    vphone: queryInfo.value.vphone,
    pageIndex: queryInfo.value.pageIndex,
    pageSize: queryInfo.value.pageSize,
  };
  axios({
    url: "/api/Vip/GetVip",
    method: "get",
    params: obj,
  })
    .then((res) => {
      console.log(res);
      list.value = res.data.data;
      totalCount.value = res.data.totalCount;
      totalPage.value = res.data.totalPage;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
